.btn2 {
    display: inline-block;
    position: relative;
    margin: 0 4px;
    min-width: 145px;
    height: 50px !important;
    padding: 0 5px !important;
    transition: background 0s !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #2993cc !important;
    background-size: 100% 100% !important;
    background-position: left top !important;
    background-repeat: repeat-x !important;
    background-image: url(./center.png) !important;
    background-clip: content-box !important;

    span {
        font-weight: bold;
    }

    .before {
        display: block;
        position: absolute !important;
        width: 6px;
        height: 100%;
        left: 0%;
        top: 0;
        background-image: url(./left.png);
        background-size: 100% 100%;
    }

    .after {
        display: block;
        position: absolute !important;
        width: 6px;
        height: 100%;
        right: 0%;
        top: 0;
        background-image: url(./right.png);
        background-size: 100% 100%;
    }

    &.active,
    &.on,
    &:hover {
        background-size: 100% 100%, 100% 100% !important;
        background-position: left top, center bottom !important;
        background-repeat: repeat-x, no-repeat !important;
        background-image: url(./center.png), url(./on_center.png) !important;
        color: #ffffff !important;
        background-clip: content-box !important;
    }
}